<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
    <div>
        <ft-dialog title="选择变更客户"
                   :visible.sync="showDialog" width="90%" @close="handleClose">
            <div>
                <el-card body-style="padding-top: 0px">
                    <div>
                        <ft-pagination :total="totalRowNum" :current-page="currentPage" :page-size="pageSize" @pageChange="load">
                            <el-row slot="toolbar">
                                <el-col style="float: left;min-width: 850px;line-height: 30px">
                                    <ft-advanced-query title="请输入客户名称/编号/证件号码进行搜索" @packup="packup" @load="search"></ft-advanced-query>
                                </el-col>
                            </el-row>
                            <el-row v-if="showQueryPanel">
                                <!--高级查询-->
                                <customer-change-dialog-query-form @query="search" @change="queryChange"></customer-change-dialog-query-form>
                            </el-row>
                            <div v-show="tableData.length==0" style="text-align: center;">
                                <span>未查询到可以变更的客户数据</span>
                            </div>
                            <el-table :data="tableData"
                                      v-show="tableData.length > 0"
                                      v-loading="loading"
                                      tooltip-effect="light"
                                      class="tableClass">
                                <el-table-column prop="customerName" show-overflow-tooltip label="客户名称" align="left" min-width="120">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.customerName">{{scope.row.customerName}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="customerType" show-overflow-tooltip label="客户类型" align="center" min-width="120">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.customerType">{{scope.row.customerType.label}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="identityType" show-overflow-tooltip label="证件类型" align="center" min-width="120">
                                    <template slot-scope="scope">
                                        <ft-enum-select v-if="scope.row.customerType && scope.row.customerType.value == 'PERSONAL'"
                                                        v-model="scope.row.identityType"
                                                        :editing="false"
                                                        service-name="lss-customer"
                                                        type-name="personalType"
                                                        size="small"/>
                                        <ft-enum-select v-else-if="scope.row.customerType" v-model="scope.row.identityType"
                                                        service-name="lss-customer"
                                                        :editing="false"
                                                        type-name="certificateType"
                                                        size="small"/>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="identityNo" show-overflow-tooltip label="证件号码" align="left" min-width="120"/>
                                <el-table-column prop="mainManagerName" show-overflow-tooltip label="主办客户经理" align="left"
                                                 min-width="120"></el-table-column>
                                <el-table-column prop="deptName" show-overflow-tooltip label="所属部门" align="left"
                                                 min-width="120"></el-table-column>
                                <el-table-column prop="creationTs" show-overflow-tooltip label="建户日期" align="left"
                                                 min-width="120"></el-table-column>
                                <el-table-column min-width='120' align='center' label='功能操作'>
                                   <template slot-scope='scope' >
                                       <el-button size="small" type="text" @click="customerChange(scope.row)">
                                           发起变更
                                       </el-button>
                                   </template>
                                   </el-table-column>
                            </el-table>
                        </ft-pagination>
                    </div>
                </el-card>
            </div>
        </ft-dialog>
    </div>
</template>

<script>
    import CustomerChangeDialogQueryForm from "./CustomerChangeDialogQueryForm";

    export default {
        name: 'CustomerChangeDialog',
        components: {
            'customer-change-dialog-query-form': CustomerChangeDialogQueryForm,
        },
        props: {
            // 是否展示当前dialog
            showDialog: false,

        },

        data() {
            return {
                currentPage: 1,
                pageSize: 8,
                totalRowNum: 0,
                tableData: [],
                // 高级查询面板是否展示
                showQueryPanel: false,
                // 高级查询条件
                querParam: {},
                // 历史高级查询条件
                historyQueryParam: {},
                loading: true,
                taskId: '',
            }
        },
        watch: {

        },
        mounted() {

        },
        methods: {
            load(pageIndex, pageSize) {
                this.loading = true
                if ('' !== pageIndex && pageSize) {
                    this.currentPage = pageIndex
                    this.pageSize = pageSize
                }
                if (!this.querParam) {
                    this.querParam = {}
                }
                this.$http.post('/joys-rest/lss-customer/custChange/customer', this.querParam,
                    {
                        params: {
                            pageIndex: this.currentPage,
                            pageSize: this.pageSize,
                        }
                    }).then(
                    resp => {
                        this.tableData = resp.body.rows
                        this.totalRowNum = resp.body.total
                        this.loading = false
                    },
                    resp => {
                        this.$message.error(resp.body.message)
                        this.loading = false
                    })
            },
            packup(showQueryPanel) {
                this.showQueryPanel = showQueryPanel
            },
            search(querParam) {
                this.queryChange(querParam)
                this.load(this.currentPage, this.pageSize)
            },
            queryChange(querParam) {
                if (querParam) {
                    querParam.initQuery = false
                    this.querParam = querParam
                    this.historyQueryParam = querParam
                } else {
                    // 没有设置查询参数,则使用历史查询参数
                    querParam = this.historyQueryParam
                    this.querParam = querParam
                }
                this.currentPage = 1
            },
            handleClose() {
                // this.showDialog = false
                this.$emit('closeDialog', false)
            },

            // 发起变更
            customerChange(val) {
                this.$http.put('/joys-rest/lss-customer/custChange/change/' + val.customerId).then(
                    resp => {
                        let changeObj = resp.body
                        // 关闭dialog切换至新增变更客户表单
                        this.$emit('closeDialog', false)
                        this.$emit('changeToDetail', changeObj)
                        this.$message.success('新增成功')
                    },
                    resp => {
                        this.$message.error(resp.body.message)
                    })
            },

        }



    }
</script>

<style>
    .el-table__body-wrapper {
        overflow-y: scroll;
        position: relative;
    }

    .el-select-el-input {
        float: left;
    }

    .el-select-el-input .el-input__inner {
        border-radius: 9px;
    }

    .tableClass .cell {
        word-break: keep-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .el-table .cell {
        white-space: pre-wrap;
    }
</style>
